<template>
	<view class="like_card" ref="content" id="content">
		<view class="title">
			猜你喜欢
		</view>
		<view class="content">
			<scroll-view scroll-x="true" show-scrollbar='false' style="width: 100%;" @scroll='scroll'>
				<view class="scroll_content" >
					<view v-for="(i,j) in list1" :key='i.id' class="item" ref="item" @click="jumpDetail(i)">
						<view class="img_box">
							<image :src="i.cover" mode="widthFix" class="like_img"></image>
						</view>
						<view class="like_detail">
							{{i.name}}
						</view>
						<view class="like_tag">
							未购中分{{i.total_red_packet}}元红包
						</view>
						<view class="like_price">
							¥{{i.selling_price}}
						</view>
					</view>
				</view>
				<view class="scroll_content">
					<view v-for="(i,j) in list2" :key='i.id' class="item" @click="jumpDetail(i)">
						<view class="img_box">
							<image :src="i.cover" mode="widthFix" class="like_img"></image>
						</view>
						<view class="like_detail">
							{{i.name}}
						</view>
						<view class="like_tag">
							未购中分{{i.total_red_packet}}元红包
						</view>
						<view class="like_price">
							¥{{i.selling_price}}
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="tab_bar">
				<process :num='num'></process>
			</view>
		</view>
	</view>
</template>

<script>
	import process from '../../common/components/process.vue'
	import {guessLike} from '../../../../api/shopping/shopping.js'
	export default {
		components:{
			process
		},
		data() {
			return {
				num:0,
				list1:[],
				list2:[],
				likelist:[],
				width:0
			}
		},
		mounted(){
			this.guessLike();
		},
		methods: {
			async guessLike(){
				const res = await guessLike();
				this.likelist = res.data;
				this.changeLike();
			},
			changeLike(){
				let length = this.likelist.length % 2 == 0? this.likelist.length/2 : parseInt(this.likelist.length/2 + 1);
				this.list1 = this.likelist.slice(0,length);
				this.list2 = this.likelist.slice(length,this.likelist.length);
				let info = uni.createSelectorQuery().in(this).select("#content");
				info.boundingClientRect((data)=> { 
						this.width = data.width;
				}).exec(function(res){})
				this.$nextTick(()=>{
					let allWidth = (length / 3) * this.width;
					this.num = this.width / allWidth;
				})
				
			},
			scroll(e) {				
				this.num = (e.target.scrollLeft + this.width)  / e.detail.scrollWidth + 0.02;				
			},
			jumpDetail(data){
				uni.navigateTo({
					url: `/pages/shopping/commodity/detail/index?id=${encodeURIComponent(data.id)}`
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '../../common/css/color.scss';

	.like_card {

		.title {
			padding: 8rpx;
			font-size: 30rpx;
			color: #070707;
		}
		.tab_bar{
			width: 100%;
			height: 20rpx;
			margin: 0 auto;
		}
		.content {
			width: 100%;
			margin: 20rpx auto;
			
			.scroll_content {
				width: 100%;
				display: flex;
				margin-bottom: 20rpx;
				// flex-wrap: wrap;
			}

			.item {
				width: 220rpx;
				margin: 10rpx;

				&:last-child {
					margin-right: 0;
				}

				.img_box {
					width: 220rpx;
					height: 220rpx;
					border-radius: 8px;
					overflow: hidden;
				}

				.like_img {
					width: 220rpx;
					display: block;
				}

				.like_detail {
					margin-top: 10rpx;
					width: 220rpx;
					font-size: 24rpx;
					line-height: 34rpx;
					color: $black;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
				}

				.like_tag {
					color: $color;
					padding: 8rpx;
					font-size: 20rpx;
					background: $tagbackgrond;
					margin: 10rpx 0;
				}

				.like_price {
					color: $color;
					font-size: 28rpx;
					line-height: 38rpx;
				}
			}
		}
	}
</style>
